// 自定义指令，指令本质上是一个对象
import { createApp } from 'vue'
import Loading from './loading'
import { addClass, removeClass } from '@/js/dom'
const relativeCls = 'g-relative'

const loadingDirective = {
  // 在指令绑定的元素挂载之前调用，el为绑定的dom，binding为绑定的值

  mounted (el, binding) {
    // 创建一个vue实例，其描述为Loading组件的描述，该实例挂载的节点为一个临时创建的div
    const instance = createApp(Loading).mount(document.createElement('div'))
    // 保存该vue实例，便于后面调用
    el.instance = instance
    // 获取binding动态参数
    const title = binding.arg
    if (typeof title !== 'undefined') {
      instance.setTitle(title)
    }
    // 如果正在加载，则添加Loding组件
    if (binding.value) {
      append(el)
    }
  },
  // el的vNode更新后调用
  updated (el, binding) {
    if (binding.value !== binding.oldValue) {
      binding.value ? append(el) : remove(el)
    }
  }
}

function append (el) {
  const style = getComputedStyle(el)
  if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
    addClass(el, relativeCls)
  }
  el.appendChild(el.instance.$el)
}

function remove (el) {
  el.removeChild(el.instance.$el)
  removeClass(el, relativeCls)
}

export default loadingDirective
